<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="container mx-auto px-4">
      <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">
        文件类型分析器
      </h1>
      
      <div class="max-w-6xl mx-auto">
        <!-- 目录输入区域 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 class="text-xl font-semibold mb-4">输入目录路径</h2>
          
          <div class="space-y-4">
            <div v-for="(directory, index) in directories" :key="index" class="flex gap-2">
              <input
                v-model="directories[index]"
                type="text"
                placeholder="输入目录路径 (例如: D:\Documents)"
                class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <button
                @click="removeDirectory(index)"
                v-if="directories.length > 1"
                class="px-3 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
              >
                删除
              </button>
            </div>
          </div>
          
          <div class="flex gap-2 mt-4">
            <button
              @click="addDirectory"
              class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
            >
              添加目录
            </button>
            <button
              @click="analyzeDirectories"
              :disabled="analyzing"
              class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50"
            >
              {{ analyzing ? '分析中...' : '分析文件类型' }}
            </button>
          </div>

          <div class="mt-4 p-4 bg-blue-50 rounded-md">
            <p class="text-sm text-blue-700">
              <strong>类型安全检测:</strong> 对于 .ts/.tsx/.js/.jsx 文件，如果文件开头包含 <code class="bg-blue-200 px-1 rounded">// @ts-check</code> 注释，将被识别为类型安全文件
            </p>
          </div>
        </div>

        <!-- 分析结果区域 -->
        <div v-if="results.length > 0" class="space-y-6">
          <div v-for="(result, index) in results" :key="index" class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">{{ result.directory }}</h3>
            
            <div v-if="result.error" class="text-red-600 p-4 bg-red-50 rounded-md">
              错误: {{ result.error }}
            </div>
            
            <div v-else>
              <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 基础统计信息 -->
                <div class="bg-gray-50 p-4 rounded-lg">
                  <h4 class="font-medium mb-3 text-gray-700">基础统计</h4>
                  <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                      <span>总文件数:</span>
                      <span class="font-semibold">{{ result.totalFiles }}</span>
                    </div>
                    <div class="flex justify-between">
                      <span>文件类型数:</span>
                      <span class="font-semibold">{{ Object.keys(result.fileTypes).length }}</span>
                    </div>
                  </div>
                </div>

                <!-- JS/TS 文件统计 -->
                <div class="bg-blue-50 p-4 rounded-lg">
                  <h4 class="font-medium mb-3 text-blue-700">JS/TS 文件统计</h4>
                  <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                      <span>JS/TS 文件总数:</span>
                      <span class="font-semibold">{{ result.jstsFiles.total }}</span>
                    </div>
                    <div class="flex justify-between">
                      <span>类型安全文件:</span>
                      <span class="font-semibold text-green-600">{{ result.jstsFiles.typeSafe }}</span>
                    </div>
                    <div class="flex justify-between">
                      <span>普通文件:</span>
                      <span class="font-semibold">{{ result.jstsFiles.regular }}</span>
                    </div>
                    <div class="flex justify-between pt-1 border-t border-blue-200">
                      <span>类型安全占比:</span>
                      <span class="font-bold text-blue-600">{{ result.jstsFiles.typeSafePercentage }}%</span>
                    </div>
                  </div>
                </div>

                <!-- 类型安全文件统计 -->
                <div class="bg-green-50 p-4 rounded-lg">
                  <h4 class="font-medium mb-3 text-green-700">类型安全统计</h4>
                  <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                      <span>类型安全文件总数:</span>
                      <span class="font-semibold text-green-600">{{ result.typeSafeFiles.total }}</span>
                    </div>
                    <div class="flex justify-between">
                      <span>占全部文件比例:</span>
                      <span class="font-bold text-green-600">{{ result.typeSafeFiles.percentage }}%</span>
                    </div>
                    <div v-if="result.typeSafeFiles.total > 0" class="pt-2 border-t border-green-200">
                      <div v-for="[type, count] in Object.entries(result.typeSafeFiles.byType)" :key="type" 
                           class="flex justify-between text-xs">
                        <span>{{ type }}:</span>
                        <span>{{ count }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 文件类型分布图表 -->
              <div>
                <h4 class="font-medium mb-4">文件类型分布</h4>
                <div class="space-y-3">
                  <div
                    v-for="[ext, count] in Object.entries(result.fileTypes).sort((a, b) => b[1] - a[1])"
                    :key="ext"
                    class="flex items-center gap-3"
                  >
                    <div class="w-24 text-sm font-mono text-right flex-shrink-0">
                      {{ ext || '无扩展名' }}:
                    </div>
                    <div class="flex-1 bg-gray-200 rounded-full h-5 relative min-w-0">
                      <div
                        class="bg-gradient-to-r from-blue-500 to-blue-600 h-5 rounded-full transition-all duration-500"
                        :style="{ width: (count / result.totalFiles * 100) + '%' }"
                      ></div>
                      <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-gray-700">
                        {{ count }}
                      </span>
                    </div>
                    <div class="text-sm text-gray-600 w-12 flex-shrink-0">
                      {{ Math.round(count / result.totalFiles * 100) }}%
                    </div>
                  </div>
                </div>
              </div>

              <!-- 类型安全文件分布 -->
              <div v-if="result.typeSafeFiles.total > 0" class="mt-6 pt-6 border-t">
                <h4 class="font-medium mb-4 text-green-700">类型安全文件分布</h4>
                <div class="space-y-3">
                  <div
                    v-for="[type, count] in Object.entries(result.typeSafeFiles.byType).sort((a, b) => b[1] - a[1])"
                    :key="type"
                    class="flex items-center gap-3"
                  >
                    <div class="w-32 text-sm font-mono text-right flex-shrink-0 text-green-700">
                      {{ type }}:
                    </div>
                    <div class="flex-1 bg-green-100 rounded-full h-5 relative min-w-0">
                      <div
                        class="bg-gradient-to-r from-green-500 to-green-600 h-5 rounded-full transition-all duration-500"
                        :style="{ width: (count / result.typeSafeFiles.total * 100) + '%' }"
                      ></div>
                      <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-gray-700">
                        {{ count }}
                      </span>
                    </div>
                    <div class="text-sm text-green-600 w-12 flex-shrink-0">
                      {{ Math.round(count / result.typeSafeFiles.total * 100) }}%
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const directories = ref([''])
const results = ref([])
const analyzing = ref(false)

const addDirectory = () => {
  directories.value.push('')
}

const removeDirectory = (index) => {
  directories.value.splice(index, 1)
}

const analyzeDirectories = async () => {
  analyzing.value = true
  results.value = []
  
  try {
    for (const directory of directories.value) {
      if (!directory.trim()) continue
      
      try {
        const response = await $fetch('/api/analyze-directory', {
          method: 'POST',
          body: { directory: directory.trim() }
        })
        
        results.value.push({
          directory: directory.trim(),
          ...response
        })
      } catch (error) {
        results.value.push({
          directory: directory.trim(),
          error: error.message || '无法分析此目录'
        })
      }
    }
  } finally {
    analyzing.value = false
  }
}
</script>

<style>
/* 全局样式已通过Tailwind CSS类处理 */
</style>
